<template>
  <nav-bar />
  <view class="my-page">
    <!-- 顶部店铺信息 -->
    <view class="shop-header">
      <view class="shop-info">
        <view class="shop-title">怡西奇玩偶屋</view>
        <view class="shop-email" @click="copyEmail">
          <text>邮箱：{{ userInfo?.email || '-' }}</text>
          <text class="copy-icon">📋</text>
        </view>
        <view class="user-role">
          <text>权限：{{ getUserRole }}</text>
        </view>
      </view>
      <view class="shop-logo">
        <!-- 店铺logo骨架/占位 -->
        <view class="logo-skeleton">
          <image :src="IntranetConfig.domain + '/media/systems/logo.jpeg'" mode="aspectFit" />
        </view>
      </view>
      <view class="refresh-btn" @click="refreshUserInfo">
        <uni-icons type="refresh" size="24" color="#ff7e2d" />
      </view>
    </view>

    <!-- 功能列表 -->
    <view class="menu-list">
      <view class="menu-item" @click="goToClockIn">
        <view class="icon iconfont icon-daka"></view>
        <text>打卡</text>
      </view>
      <view class="menu-item" @click="goToPayMethod">
        <view class="icon iconfont icon-shoujizhifu"></view>
        <text>支付方式</text>
      </view>
      <view class="menu-item" @click="goToFeedback">
        <view class="icon iconfont icon-fankui"></view>
        <text>反馈</text>
      </view>
      <view class="menu-item" @click="goToVersion">
        <view class="icon iconfont icon-guanfangbanben"></view>
        <text>版本</text>
      </view>
      <view class="menu-item" @click="goToNotice">
        <view class="icon iconfont icon-gonggao"></view>
        <text>查看公告</text>
      </view>
      <view class="menu-item logout-item" @click="showLogoutConfirm">
        <view class="icon iconfont icon-tuichu"></view>
        <text>退出登录</text>
      </view>
    </view>

    <!-- 自定义底部tabBar -->
    <my-tabbar />

    <!-- 退出确认弹窗 -->
    <message-box
      v-model="showLogoutBox"
      title="确定要退出登录吗？"
      content="退出登录后，您需要重新登录才能继续使用系统。并且之前所有数据都将被清除。"
      @confirm="handleLogout"
    />
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { IntranetConfig, UserConfig } from '@/static/js/config'
import MyTabbar from '@/components/my-tabbar.vue'
import MessageBox from '@/components/message-box/message-box.vue'
import { onLoad } from '@dcloudio/uni-app'

// 用户信息
const userInfo = computed(() => UserConfig.getUserInfo())

// 获取用户权限显示文本
const getUserRole = computed(() => {
  const role = userInfo.value?.is_superuser
  switch (role) {
    case 1:
      return '老板'
    case 2:
      return '店长'
    case 3:
      return '员工'
    default:
      return '未知'
  }
})

// 刷新用户信息
async function refreshUserInfo() {
  if (!userInfo.value?.id) return
  
  try {
    const res = await uni.request({
      url: IntranetConfig.domain + `api/users/get_user/${userInfo.value.id}/`,
      method: 'GET',
      header: IntranetConfig.headers
    })
    
    if (res.data.code === 200) {
      const newUserInfo = res.data.data
      const currentUserInfo = userInfo.value
      
      // 检查信息是否有变化
      if (JSON.stringify(newUserInfo) !== JSON.stringify(currentUserInfo)) {
        // 更新本地存储的用户信息
        UserConfig.setUserInfo(newUserInfo)
        // 强制刷新页面数据
        uni.showToast({
          title: '信息已更新',
          icon: 'success',
          duration: 1500,
          success: () => {
            // 延迟刷新页面，确保 toast 显示完成
            setTimeout(() => {
              // uni.reLaunch({
              //   url: '/pages/my/my'
              // })
            }, 1500)
          }
        })
      } else {
        uni.showToast({
          title: '已是最新',
          icon: 'none'
        })
      }
    } else {
      throw new Error(res.data.msg)
    }
  } catch (error) {
    uni.showToast({
      title: error.message || '刷新失败',
      icon: 'error'
    })
  }
}

// 复制邮箱
function copyEmail() {
    if (!userInfo.value?.email) return
    
    uni.setClipboardData({
        data: userInfo.value.email,
        success: () => {
            uni.showToast({
                title: '邮箱已复制',
                icon: 'success'
            })
        }
    })
}

onLoad(() => {
    // 隐藏tabbar
    uni.hideTabBar()
})

// 退出登录相关
const showLogoutBox = ref(false)

function showLogoutConfirm() {
    showLogoutBox.value = true
}

function handleLogout() {
    // 清除用户信息
    UserConfig.clearUserInfo()
    // 清除本地全部信息
    uni.clearStorageSync()
    // 跳转到登录页
    uni.reLaunch({
        url: '/pages/login/login'
    })
}

function goToPayMethod() {
    uni.navigateTo({
        url: '/pages/add_pay_method/add_pay_method'
    })
}

function goToClockIn() {
    uni.navigateTo({
        url: '/pages/clock_in/clock_in'
    })
}

function goToFeedback() {
    uni.navigateTo({
        url: '/pages/feedback/feedback'
    })
}

function goToVersion() {
    uni.navigateTo({
        url: '/pages/version/version'
    })
}
function goToNotice() {
  uni.navigateTo({
        url: '/pages/notice/notice'
    })
}
</script>

<style scoped lang="scss">
.my-page {
  background: #f8f9fa;
  min-height: 100vh;
  padding-bottom: 120rpx;
  box-sizing: border-box;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}
.shop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 56rpx 32rpx 32rpx 32rpx;
  background: #fff;
  border-radius: 0 0 32rpx 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06);
  margin-bottom: 32rpx;
  position: relative;
  
  .refresh-btn {
    position: absolute;
    top: 32rpx;
    right: 32rpx;
    width: 64rpx;
    height: 64rpx;
    background: #fff6ed;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 16rpx rgba(255,126,45,0.08);
    transition: all 0.2s;
    
    &:active {
      transform: scale(0.95);
      background: #ffe0b2;
    }
  }
  
  .shop-info {
    .shop-title {
      font-size: 52rpx;
      font-weight: bold;
      color: #222;
      margin-bottom: 16rpx;
      letter-spacing: 2rpx;
    }
    .shop-email {
      font-size: 28rpx;
      color: #888;
      letter-spacing: 1rpx;
      display: flex;
      align-items: center;
      gap: 8rpx;
      cursor: pointer;
      transition: opacity 0.2s;
      
      &:active {
        opacity: 0.7;
      }
      
      .copy-icon {
        font-size: 24rpx;
      }
    }
    .user-role {
      font-size: 28rpx;
      color: #ff7e2d;
      margin-top: 12rpx;
      font-weight: 500;
      background: #fff6ed;
      padding: 4rpx 16rpx;
      border-radius: 8rpx;
      display: inline-block;
    }
  }
  .shop-logo {
    .logo-skeleton {
      width: 128rpx;
      height: 128rpx;
      background: #fff6ed;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4rpx 16rpx #ffeede;
      border: 4rpx solid #fff;
      image {
        width: 96rpx;
        height: 96rpx;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 2rpx 8rpx #f5f5f5;
      }
    }
  }
}
.menu-list {
  margin: 0 24rpx;
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
  padding: 8rpx 0;
  .menu-item {
    display: flex;
    align-items: center;
    padding: 32rpx 32rpx 32rpx 40rpx;
    font-size: 32rpx;
    color: #222;
    border-bottom: 1rpx solid #f5f5f5;
    transition: background 0.2s;
    
    &.logout-item {
      color: #ff4d4f;
      .icon {
        background: #fff1f0;
        box-shadow: 0 2rpx 8rpx #ffecec;
      }
    }
    
    .icon {
      width: 48rpx;
      height: 48rpx;
      margin-right: 28rpx;
      background: #fff6ed;
      border-radius: 12rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2rpx 8rpx #ffeede;
    }
    &:active {
      background: #fafafa;
    }
    &:last-child {
      border-bottom: none;
    }
  }
}
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100rpx;
  background: #fff;
  border-top: 1rpx solid #eee;
  display: flex;
  z-index: 10;
  .tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 24rpx;
    .tabbar-icon {
      width: 44rpx;
      height: 44rpx;
      margin-bottom: 6rpx;
      background: #fff;
      border-radius: 8rpx;
    }
    &.active {
      color: #ff7e2d;
      .tabbar-icon {
        background: #fff6ed;
      }
    }
  }
}

/* 图标占位样式，可替换为svg、iconfont、uView等 */
.icon-attr { background: url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" fill=\"%23ff7e2d\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"4\" fill=\"%23fff6ed\"/><rect x=\"6\" y=\"6\" width=\"4\" height=\"4\" fill=\"%23ff7e2d\"/><rect x=\"14\" y=\"6\" width=\"4\" height=\"4\" fill=\"%23ff7e2d\"/><rect x=\"6\" y=\"14\" width=\"4\" height=\"4\" fill=\"%23ff7e2d\"/><rect x=\"14\" y=\"14\" width=\"4\" height=\"4\" fill=\"%23ff7e2d\"/></svg>') no-repeat center/60%;}
.icon-pay { background: url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" fill=\"%23ff7e2d\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"2\" y=\"6\" width=\"20\" height=\"12\" rx=\"3\" fill=\"%23fff6ed\"/><rect x=\"4\" y=\"8\" width=\"16\" height=\"8\" rx=\"2\" fill=\"%23ff7e2d\"/></svg>') no-repeat center/60%;}
.icon-service { background: url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" fill=\"%23ff7e2d\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"%23fff6ed\"/><rect x=\"7\" y=\"10\" width=\"10\" height=\"4\" rx=\"2\" fill=\"%23ff7e2d\"/><rect x=\"10\" y=\"16\" width=\"4\" height=\"2\" rx=\"1\" fill=\"%23ff7e2d\"/></svg>') no-repeat center/60%;}
.icon-feedback { background: url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" fill=\"%23ff7e2d\" xmlns=\"http://www.w3.org/2000/svg\"><ellipse cx=\"12\" cy=\"12\" rx=\"10\" ry=\"8\" fill=\"%23fff6ed\"/><rect x=\"7\" y=\"10\" width=\"10\" height=\"4\" rx=\"2\" fill=\"%23ff7e2d\"/></svg>') no-repeat center/60%;}
.icon-setting { background: url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" fill=\"%23ff7e2d\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"%23fff6ed\"/><rect x=\"10\" y=\"6\" width=\"4\" height=\"12\" rx=\"2\" fill=\"%23ff7e2d\"/></svg>') no-repeat center/60%;}
.icon-logout { background: url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" fill=\"%23ff4d4f\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"4\" fill=\"%23fff1f0\"/><path d=\"M8 12h8M12 8l4 4-4 4\" stroke=\"%23ff4d4f\" stroke-width=\"2\" fill=\"none\"/></svg>') no-repeat center/60%;}
.tabbar-icon.icon-goods { background: url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" fill=\"%23888\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"4\" y=\"6\" width=\"16\" height=\"12\" rx=\"3\" fill=\"%23fff6ed\"/><rect x=\"6\" y=\"8\" width=\"12\" height=\"8\" rx=\"2\" fill=\"%23888\"/></svg>') no-repeat center/60%;}
.tabbar-icon.icon-report { background: url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" fill=\"%23888\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"4\" fill=\"%23fff6ed\"/><rect x=\"8\" y=\"8\" width=\"8\" height=\"8\" rx=\"2\" fill=\"%23888\"/></svg>') no-repeat center/60%;}
.tabbar-icon.icon-stock { background: url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" fill=\"%23888\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"4\" y=\"8\" width=\"16\" height=\"8\" rx=\"2\" fill=\"%23fff6ed\"/><rect x=\"8\" y=\"10\" width=\"8\" height=\"4\" rx=\"1\" fill=\"%23888\"/></svg>') no-repeat center/60%;}
.tabbar-icon.icon-my { background: url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" fill=\"%23ff7e2d\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"12\" cy=\"8\" r=\"4\" fill=\"%23ff7e2d\"/><rect x=\"6\" y=\"14\" width=\"12\" height=\"6\" rx=\"3\" fill=\"%23fff6ed\"/></svg>') no-repeat center/60%;}
</style>
